<template>
	<view class="page-container">
		<view class="header bg-white">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view>
					<x-back-btn></x-back-btn>
				</view>
				<view class="u-f-40 font-bold common-title">{{ lang_comerciante.subscribe_online }}</view>
				<view></view>
			</view>
		</view>

		<view>
			<!-- 预约状态 -->
			<view class="bg-white">
				<view style="margin: 0 auto;width: 620rpx; height: 378rpx">
					<view class="u-text-center u-p-t-44">
						<image :src="currentSubscribe.icon" style="width: 116rpx; height: 148rpx;" class="clear-flex">
						</image>

						<view class="u-m-t-24 u-f-36 u-lh-50 font-medio">
							{{ lang_comerciante['subscribe_' + currentSubscribe.labelKey] }}
						</view>

						<view class="u-m-t-10 u-f-28 u-lh-40 color-grew">
							{{ lang_comerciante['subscribe_' + currentSubscribe.labelKey + 'Tips'] }}
						</view>
					</view>
				</view>
			</view>

			<!-- 店卡片 -->
			<view style="padding: 14rpx 32rpx 0">
				<shop-card :item="({ ...dataInfo.merchant, merchantId: dataInfo.merchantId })" @phone="settingValue = 'contact'"></shop-card>
			</view>

			<!-- 预约时间 -->
			<view style="padding: 14rpx 32rpx 0; ">
				<view class="shop-card u-f-32 u-lh-44" style="padding: 28rpx 20rpx; background-color: #FFFFFF;">
					<view class="flex-center-between u-m-b-22">
						<view class="font-medio">{{ lang_comerciante.subscribe_time }}</view>

						<view class="flex color-grew">
							<view>{{ subscribeDay || '' }}</view>

							<view class="u-m-l-30">{{ dayjs(dataInfo.reverseDate || dayjs()).format('MM-DD') }}</view>
						</view>
					</view>

					<!-- 分割线 -->
					<u-gap height="1" bgColor="rgba(151, 151, 151, .1)"></u-gap>

					<view class="flex-center-between u-m-t-18">
						<view class="font-medio">{{ lang_comerciante.subscribe_servicer }}</view>

						<view class="color-grew">{{ dataInfo.merchantStaffName || '' }}</view>
					</view>
				</view>
			</view>

			<!-- 预约人数 -->
			<view style="padding: 14rpx 32rpx 0">
				<view class="shop-card flex-center-between u-f-32 u-lh-44"
					style="padding: 28rpx 20rpx; background-color: #FFFFFF;">
					<view class="font-medio">{{ lang_comerciante.subscribe_people }}</view>

					<view class="flex color-grew">
						<view>{{ dataInfo.amount || 0 }}{{ lang_unit.people }}</view>

						<view class="u-m-l-30">{{ dataInfo.phone || '' }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<x-fixed-bottom>
			<view>
				<view class="flex-center-center u-m-b-24">
					<!-- 取消预约 -->
					<x-common-btn v-if="dataInfo.reverseStatus === 1" box-shadow="0 4rpx 8rpx 0 rgba(252, 31, 63, 0.31)"
						@click="cancelVisible = true">{{ lang_comerciante.subscribe_cancel }}</x-common-btn>

					<!-- 再次预约 -->
					<x-common-btn v-else box-shadow="0 4rpx 8rpx 0 rgba(252, 31, 63, 0.31)"
						@click="jumpUrl(`/pages/user/comerciante/subscribe/save/save?merchantId=${ dataInfo.merchantId }&merchantServiceId=${ dataInfo.merchantServiceId }`)">
						{{ lang_comerciante.subscribe_again }}
					</x-common-btn>
				</view>

				<view class="flex-center-center u-p-b-40">
					<x-common-btn box-shadow="0 4rpx 8rpx 0 rgba(252, 31, 63, 0.31)" color="#333333"
						background="#FFFFFF" borderColor="rgba(227, 227, 227, 1)" @click="jumpIndex()">
						{{ lang_common.back_index }}
					</x-common-btn>
				</view>
			</view>
		</x-fixed-bottom>

		<!-- 取消预约弹窗 -->
		<x-popup v-model="cancelVisible" mode="bottom" z-index="10203" @close="cancelVisible = false">
			<view class="subscribe-container u-p-t-28">
				<view class="subscribe-header u-text-center u-m-b-20">
					<view class="u-f-32 u-lh-44 font-medio u-m-t-28">{{ lang_comerciante.subscribe_cancelTitle }}</view>

					<view class="u-f-28 u-lh-40 color-grew u-m-t-10">{{ lang_comerciante.subscribe_cancelTips }}</view>

					<image src="@/static/image/common/close_grew.png" style="width: 30rpx; height: 28rpx"
						class="subscribe-close" @click="cancelVisible = false"></image>
				</view>

				<!-- 分割线 -->
				<u-gap height="1" bgColor="rgba(151, 151, 151, .1)"></u-gap>

				<view class="subscribe-box u-m-t-28">
					<view style="padding: 0 30rpx 30rpx">
						<view v-for="(item, index) in cancelItems" :key="index" style="padding: 21rpx 0;"
							class="flex-center" @click="cancelIndex = index">
							<x-checkbox :value="cancelIndex === index"></x-checkbox>
							<view class="u-m-l-22 u-f-28 u-lh-40">{{ item.label }}</view>
						</view>
					</view>
					<image src=""></image>
					<view class="flex-center-center u-p-b-40">
						<x-common-btn width="670" @click="cancelAction()">{{ lang_common.done }}</x-common-btn>
					</view>
				</view>
			</view>
		</x-popup>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		merchantServiceInfo,
		merchantServiceCancelReverse
	} from '@/api/user/merchantService.js'
	const subscribeStatusList = [
		// 0待确认，1待兑现，2已完成，-1已取消，-2已拒绝-3已爽约
		{
			key: 'success',
			value: 1,
			labelKey: 'success',
			label: '预约成功',
			tips: '稍后商家将会与您联系，请留意接听'
		},
		{
			key: 'failure',
			value: -1,
			labelKey: 'failure',
			label: '已取消',
			tips: '您已取消预约，如需继续前往，请点击“再次预约”重新发起预约'
		},
		{
			key: 'answer',
			value: -3,
			labelKey: 'broken',
			label: '已爽约',
			tips: '商家已拒绝预约，如有疑问请电话联系商家'
		},
		{
			key: 'success',
			value: 2,
			labelKey: 'complete',
			label: '服务已完成',
			tips: '服务已完成，欢迎下次在预约'
		},
		{
			key: 'wait',
			value: 0,
			labelKey: 'queue',
			label: '预约中',
			tips: '正在预约中，请耐心等待商家确认'
		},
	].map(item => ({
		...item,
		icon: require(`@/static/image/common/${ item.key }.png`)
	}))
	export default {
		data() {
			return {
				reverseId: '',
				dataInfo: {},

				cancelVisible: false,
				cancelItems: [],
				cancelIndex: 0,
				
				settingValue: ''
			}
		},
		computed: {
			currentSubscribe() {
				let {
					reverseStatus
				} = this.dataInfo
				reverseStatus = typeof reverseStatus === 'number' ? reverseStatus : 0
				return subscribeStatusList.find(item => item.value === reverseStatus) || {}
			},
			// 当前星期几
			subscribeDay() {
				// 初始化周期为7
				const DAY = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
				return this.lang_time[DAY[dayjs(dayjs(this.dataInfo.reverseDate || dayjs())).day()]] || ''
			}
		},
		onLoad({
			reverseId
		}) {
			this.reverseId = reverseId
			// 初始化反馈子项
			let cancelItems = this.lang_comerciante.subscribe_cancelItems.map((item, index) => {
				let result = {
					key: index,
					label: item
				}
				return result
			})
			this.cancelItems = cancelItems
			this.getInfo()
		},
		methods: {
			// 取消预约
			cancelAction() {
				merchantServiceCancelReverse({
					reverseId: this.reverseId
				}).then(() => {
					this.cancelVisible = false
					this.getInfo()
				})
			},
			// 获取预约详情
			getInfo() {
				merchantServiceInfo({
					reverseId: this.reverseId
				}).then(result => {
					this.dataInfo = result
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.subscribe {
		&-container {
			padding-top: 28rpx;
			border-top-left-radius: 46rpx;
			border-top-right-radius: 46rpx;
			background-color: #FFFFFF
		}

		&-header {
			position: relative;
			top: 0;
			left: 0;
		}

		&-close {
			position: absolute;
			top: 12rpx;
			right: 28rpx;
		}
	}
</style>
